<template>
  <div id="area">
    <mt-header title="欢迎登录" >
        <router-link to="/me" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <mt-field type="text" label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
    <br />
    <mt-field type="password" label="密码" placeholder="请输入密码" v-model="userpswd"></mt-field>
    <br />
    <mt-button type="primary" size="large" @click="checkInfo">确定</mt-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      userpswd: ""
    };
  },
  methods: {
    checkInfo() {
      this.axios
        .post("/login", "uname=" + this.username + "&password=" + this.userpswd)
        .then(res => {
          // console.log(res.data.code)
          if (res.data.code == 0) {
            this.$messagebox.alert(res.data.message);
          } else {
            //将用户名储存到Vuex，dispatch，分发
            this.$store.dispatch("change", res.data.username);
            //localStorage中
            window.localStorage.setItem("username", res.data.username);
            //跳转到首页
            this.$router.push("/", () => {});
          }
        });
    }
  }
};
</script>